<template>
    <v-layout v-if="isLoading">
        <div class="load-pic">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <v-container fluid style="padding: 0;">
            <div class="page">
                <v-card class="topCard">
                    <v-row style="padding: 1%;">
                        <v-avatar size="125" style="border-radius: 10%;">
                            <v-img v-if="useUserStore().profile != ''" :src="useUserStore().profile" cover>
                            </v-img>
                            <v-icon v-else icon="mdi-image-off" size="125">
                            </v-icon>
                        </v-avatar>
                        <v-col cols="7" style="padding-top: 0%;">
                            <ClockComponent />
                            <v-divider style="color: white;"></v-divider>
                            <div>
                                <p class="location">
                                    {{ locationData.province }}, {{ locationData.city }}
                                </p>
                                <p class="weather-info">
                                    今天{{ weatherData.temperature }}℃, 天气{{ weatherData.weather }}
                                </p>
                            </div>
                        </v-col>
                        <v-col style="padding-top: 0%;max-width: 33%;margin-top: 1%;">
                            <FlipClock></FlipClock>
                        </v-col>
                    </v-row>
                </v-card>
                <div class="div1" v-if="role == 'STUDENT'">
                    <div class="topBar">
                        <div class="leave-chart">
                            <v-card class="leave-card" height="41vh" elevation="3">
                                <AbsenceChart width="100%" height="100%" />
                            </v-card>
                        </div>
                        <v-card class="new-1" prepend-icon="mdi-message" elevation="4" height="41vh"
                            style="margin-bottom: 1%;">
                            <template v-slot:title>
                                学院新闻
                            </template>
                            <v-divider />
                            <v-card-text>
                                <v-table class="notice-table"  fixed-header style="max-height: 30vh; overflow-y: auto;">
                                    <tbody v-for="newsItem in newsList" :key="newsItem.id">
                                        <tr>
                                            <td style="width: 80%;">{{ newsItem.title }}</td>
                                            <td style="width: 20%;"><a :href="newsItem.address" target="_blank"
                                                    style="margin-left: 5%;">了解更多</a></td>
                                        </tr>
                                    </tbody>
                                </v-table>
                            </v-card-text>
                        </v-card>
                        <v-card class="application-1" prepend-icon="mdi-stamper" elevation="4" height="41vh">
                            <template v-slot:title>
                                审核情况
                            </template>
                            <v-divider />
                            <v-card-text>
                                <v-table fixed-header style="max-height: 30vh; overflow-y: auto;">
                                    <thead>
                                        <tr>
                                            <th>
                                                申请项
                                            </th>
                                            <th>
                                                自动审核
                                            </th>
                                            <th>
                                                管理员审核
                                            </th>
                                            <th>
                                                进度
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody v-for="item in applicationList" :key="item.auditId">
                                        <tr>
                                            <td>{{ item.name }}</td>
                                            <td v-if="item.status === 0" class="unPassed">未通过</td>
                                            <td v-else class="passed">通过</td>
                                            <td v-if="item.status === 100" class="passed">通过</td>
                                            <td v-else class="unPassed">未通过</td>
                                            <td>
                                                <v-progress-circular :model-value="item.status" color="teal" :size="40" :width="5" v-if="item.status != -1">
                                                    <template v-slot:default><span class="pro1">{{ item.status }}%</span></template>
                                                </v-progress-circular>
                                                <div v-else style="color: red;">
                                                    被驳回
                                                </div>
                                            </td>
                                            <td>
                                                <v-icon @click="deleteApply(item.recordId, item.status)">mdi-delete</v-icon>
                                            </td>
                                        </tr>
                                    </tbody>
                                </v-table>
                            </v-card-text>
                        </v-card>
                    </div>
                    <div class="bottom-div">
                        <v-card class="activity-card" elevation="4" height="35vh">
                            <ActivityChart width="100%" height="100%" />
                        </v-card>
                    </div>
                </div>
                <div v-else-if="role == 'ADMIN'" class="total-div">
                    <div class="div-01">
                        <div class="pie-c">
                            <v-card class="charts" height="30vh" elevation="3">
                                <StudentNumberChart width="100%" height="100%" />
                            </v-card>
                        </div>
                        <div class="new-2">
                            <v-card prepend-icon="mdi-message" elevation="3" height="30vh">
                                <template v-slot:title>
                                    学院新闻
                                </template>
                                <v-divider />
                                <v-card-text>
                                        <v-table class="notice-table"  fixed-header style="max-height: 23vh; overflow-y: auto;">
                                            <tbody v-for="newsItem in newsList" :key="newsItem.id">
                                                <tr>
                                                    <td style="width: 80%;">{{ newsItem.title }}</td>
                                                    <td style="width: 20%;"><a :href="newsItem.address" target="_blank"
                                                            style="margin-left: 5%;">了解更多</a></td>
                                                </tr>
                                            </tbody>
                                        </v-table>
                                </v-card-text>
                            </v-card>
                        </div>
                        <div class="message-2">
                            <v-card class="message-card" height="30vh" elevation="3">
                                <v-tabs v-model="tab" align-tabs="center" grow>
                                    <v-tab :value="1">
                                        学生申请
                                        <v-icon icon="mdi-forum" color="blue" size="large"></v-icon>
                                    </v-tab>
                                    <v-tab :value="2">
                                        教师申请
                                        <v-icon icon="mdi-forum" color="blue" size="large"></v-icon>
                                    </v-tab>
                                </v-tabs>
                                <v-window v-model="tab" style="max-height: 23vh; overflow-y: auto;">
                                    <v-window-item :value="1">
                                        <v-list v-for="item in studentList" :key="item.recordId">
                                            <v-list-item class="notice-table" style="text-align: center;">
                                                学生{{item.applicant}}向您发来了一条{{item.name}}申请
                                            </v-list-item>
                                        </v-list>
                                    </v-window-item>
                                    <v-window-item :value="2">
                                            <v-list v-for="item in teacherList" :key="item.recordId">
                                                <v-list-item class="notice-table" style="text-align: center;">
                                                    教师{{ item.applicant }}向您发来了一条{{ item.name }}申请
                                                </v-list-item>
                                            </v-list>
                                    </v-window-item>
                                </v-window>
                            </v-card>
                        </div>
                    </div>
                    <div class="chart-set">
                        <v-card class="charts" height="34vh" elevation="3">
                            <LoginCountChart width="100%" height="100%" />
                        </v-card>
                    </div>
                </div>
                <div class="div1" v-else>
                    <div class="topBar">
                        <v-card class="course-list" prepend-icon="mdi-human-male-board" height="41vh" elevation="4">
                            <template v-slot:title>
                                本学期所授课程
                            </template>
                            <v-divider />
                            <v-card-text>
                                <v-table class="notice-table" fixed-header style="max-height: 30vh; overflow-y: auto;">
                                    <thead>
                                        <tr>
                                            <th class="notice-table">
                                                课程名
                                            </th>
                                            <th class="notice-table">
                                                课序号
                                            </th>
                                            <th class="notice-table">
                                                上课地点
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody v-for="item in courseList" :key="item.id">
                                        <tr>
                                            <td class="notice-table">
                                                {{item.name}}
                                            </td>
                                            <td class="notice-table">
                                                {{item.index}}
                                            </td>
                                            <td class="notice-table">
                                                {{item.location}}
                                            </td>
                                        </tr>
                                    </tbody>
                                </v-table>
                            </v-card-text>
                        </v-card>
                        <v-card class="new-1" prepend-icon="mdi-message" elevation="4" height="41vh" 
                            style="margin-bottom: 1%;">
                            <template v-slot:title>
                                学院新闻
                            </template>
                            <v-divider />
                            <v-card-text>
                                    <v-table class="notice-table"  fixed-header style="max-height: 30vh; overflow-y: auto;">
                                        <tbody v-for="newsItem in newsList" :key="newsItem.id">
                                            <tr>
                                                <td style="width: 80%;">{{ newsItem.title }}</td>
                                                <td style="width: 20%;"><a :href="newsItem.address" target="_blank"
                                                        style="margin-left: 5%;">了解更多</a></td>
                                            </tr>
                                        </tbody>
                                    </v-table>
                            </v-card-text>
                        </v-card>
                        <v-card class="application-1" prepend-icon="mdi-stamper" elevation="4" height="41vh">
                            <template v-slot:title>
                                审核情况
                            </template>
                            <v-divider />
                            <v-card-text>
                                <v-table fixed-header style="max-height: 30vh; overflow-y: auto;">
                                    <thead>
                                        <tr>
                                            <th>
                                                申请项
                                            </th>
                                            <th>
                                                自动审核
                                            </th>
                                            <th>
                                                管理员审核
                                            </th>
                                            <th>
                                                进度
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody v-for="item in applicationList" :key="item.auditId">
                                        <tr>
                                            <td>{{ item.name }}</td>
                                            <td v-if="item.status === 0" class="unPassed">未通过</td>
                                            <td v-else class="passed">通过</td>
                                            <td v-if="item.status === 100" class="passed">通过</td>
                                            <td v-else class="unPassed">未通过</td>
                                            <td>
                                                <v-progress-circular :model-value="item.status" color="teal" :size="40" :width="5" v-if="item.status != -1">
                                                    <template v-slot:default><span class="pro1">{{ item.status }}%</span></template>
                                                </v-progress-circular>
                                                <div v-else style="color: red;">
                                                    被驳回
                                                </div>
                                            </td>
                                            <td>
                                                <v-icon @click="deleteApply(item.recordId, item.status)">mdi-delete</v-icon>
                                            </td>
                                        </tr>
                                    </tbody>
                                </v-table>
                            </v-card-text>
                        </v-card>
                    </div>
                    <div class="bottom-div">
                        <v-card class="charts" height="34vh" elevation="3">
                            <CourseAnalysisChart width="100%" height="100%" />
                        </v-card>
                    </div>
                </div>
            </div>
        </v-container>
    </v-layout>
</template>
<script setup lang="ts">
import ClockComponent from '@/components/ClockComponent.vue';
import { ref, onMounted, reactive } from 'vue'
import { GetNews } from '@/controllers/baseController';
import { type news } from '@/models/news'
import { type application } from '@/models/application'
import { message } from '@/utils/message';
import { weatherKey } from '@/constants/key';
import { useUserStore } from '@/stores';
import axios from 'axios';
import FlipClock from '@/components/FlipClock.vue'
import AbsenceChart from '@/components/chart/AbsenceChart.vue';
import ActivityChart from '@/components/chart/ActivityChart.vue';
import LoginCountChart from '@/components/chart/LoginCountChart.vue';
import StudentNumberChart from '@/components/chart/StudentNumberChart.vue';
import CourseAnalysisChart from '@/components/chart/CourseAnalysisChart.vue'
import { DeleteApply, GetAllToDoAudit, GetApplication } from '@/controllers/auditController';
import type { Course } from '@/models/course';
import { GetMergedCourseSchedule } from '@/controllers/courseController';

let role: string
let isLoading = ref(true)
let newsList = ref([] as news[])
let applicationList = ref([] as application[])
let studentList: application[], teacherList: application[]
let locationData = reactive({
    city: '',
    province: ''
})
let weatherData = ref({} as any)
let courseList: Course[]
const tab = ref(null)

onMounted(async () => {
    getData().then(() => {
        isLoading.value = false
    })
})

function getRole() {
    role = useUserStore().role;
}
async function getData() {
    getRole()
    if (role == 'STUDENT') {
        getNews(6)
        getApplication()
    }
    if (role == 'ADMIN') {
        getNews(6)
        await getAllToDoAudit()
    }
    if (role == 'TEACHER') {
        getNews(6)
        getApplication()
        await getMergedCourseSchedule()
    }
    getLocation(weatherKey)
}
async function getNews(number: number) {
    try {
        newsList.value = await GetNews(number)
    } catch (error: any) {
        message(error.message, 'error')
    }
}
async function getApplication() {
    try {
        applicationList.value = await GetApplication()
    } catch (error: any) {
        message(error.message, 'error')
    }
}
async function getLocation(key: string) {
    const params = {
        key: key,
    };
    const { data } = await axios.get('https://restapi.amap.com/v3/ip', { params })
    locationData.city = data.city
    locationData.province = data.province
    getWeather(key, data.adcode)
}
async function getWeather(key: string, adcode: string) {
    const params = {
        key: key,
        city: adcode,
    };
    const { data } = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo`, { params });
    weatherData.value = data.lives[0];
}
async function deleteApply(recordId: number, status: number)
{
    if (status != 100 &&  status != -1) {
        message("该条申请未被处理，不能清除！",'warning')
    }else{
        try {
            await DeleteApply(recordId)
            getApplication()
        } catch (error:any) {
            message(error.message, 'error')
        }
    }
}
async function getAllToDoAudit() {
    try {
        const data = await GetAllToDoAudit()
        studentList = data.studentList
        teacherList = data.teacherList
    } catch (error: any) {
        message(error.message, 'error')
    }
}
async function getMergedCourseSchedule() {
    try {
        courseList = await GetMergedCourseSchedule()
    } catch (error:any) {
        console.log(error.message,'error')
    }
}
</script>
<style>
.page {
    display: flex;
    flex-direction: column;
    user-select: none;
}

.table {
    margin: 1% 0% 0% 2%;
    width: 85%;
}

.topBar {
    display: flex;
    flex-direction: row;
    /* margin: 1% 2% 0% 1%; */
}

.news-card {
    margin-bottom: 1%;
}

.pro1 {
    font-size: 70%;
}

.topCard {
    margin-left: 2%;
    margin-right: 2%;
    background-image: url(hello_back.jpg);
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.div1 {
    display: flex;
    flex-direction: column;
    margin-left: 2%;
    margin-right: 2%;
}

.location {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #F5F5DC;
}

.weather-info {
    font-size: 18px;
    color: #F5F5DC;
}

.passed {
    color: green
}

.unPassed {
    color: red;
}

.charts {
    padding: 1%;
    width: 100%;
}

.load-pic {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.notice-table {
    border: 1px solid #e0e0e0;
}

.message-card {
    padding: 1%;
}

.total-div {
    display: flex;
    flex-direction: column;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 1%;
}

.div-01 {
    display: flex;
    flex-direction: row;
}

.chart-set {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-bottom: 1%;
}

.pie-c {
    width: 28%;
}

.new-2 {
    width: 30%;
    margin-left: 1%;
    margin-bottom: 1%;
}

.message-2 {
    width: 40%;
    margin-left: 1%;
}

.new-1 {
    width: 34%;
    margin-left: 1%;
}

.application-1 {
    margin-left: 1%;
    width: 34%;
}

.leave-chart {
    width: 30%;
}

.leave-card {
    width: 100%;
}

.bottom-div {
    margin-top: 1%;
    margin-bottom: 1%;
}

.activity-card {
    width: 100%;
    padding-top: 1%;
    padding-left: 1%;
    margin-bottom: 1%;
}

.course-list {
    width: 30%;
}
</style>